<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index</title>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script>
        $(function () {
            var vm = new Vue({
                el: "#vm",
                data: {
                    name: "Robot",
                    age: 15,
                    email: "",
                    todos: [{
                            name: '产品评审',
                            description: '新款iPhone上市前评审'
                        },
                        {
                            name: '开发计划',
                            description: '与PM确定下一版Android开发计划'
                        },
                        {
                            name: 'VC会议',
                            description: '敲定C轮5000万美元融资'
                        }
                    ]
                },
                created() {

                },
                updated() {

                },
                remove() {

                },
                methods: {
                    register: function () {
                        alert(JSON.stringify(this.$data));
                    }
                },
            });
        })
    </script>
</head>

<body>
    <div id="vm">
        <p>Hello, {{ name }}</p>
        <p>You are {{ age }} years old!</p>
        <form v-on:submit.prevent="register">
            <p><input v-model="email"></p>
            <p><input v-model="name"></p>
            <p><input type="submit" name="Submit"></p>
        </form>
        <ol>
            <li v-for="t in todos">
                <dl>
                    <dt>{{ t.name }}</dt>
                    <dd>{{ t.description }}</dd>
                </dl>
            </li>

        </ol>
    </div>
</body>

</html>